<template>
  <div class="i-box" hint="BMI计算">
    <nav-bar class="i-nav" hint="导航栏">
      <div slot="middle">BMI计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <div hint="性别选择" class="gi-radios radios">
      <div class="gi-radio-item">选择性别</div>
      <div class="gi-radio-item">
        <input type="radio" id="type1" name="love" v-model="type" value="0">
        <label for="type1">男</label>
      </div>
      <div class="gi-radio-item">
        <input type="radio" id="type2" name="love" v-model="type" value="1">
        <label for="type2">女</label>
      </div>
    </div>
    <input-item >
      <p slot="name">请输入您的身高</p>
      <input class="tit-input" id="height" name="height" type="number" slot="input" v-model="height"
             @input="height=$_numberUtil.checkPosNumber(height)">
      <p class="i-unit" slot="right">厘米</p>
    </input-item>
    <input-item>
      <p slot="name">请输入您的体重</p>
      <input class="tit-input" id="weight" name="weight" type="number" slot="input" v-model="weight"
             @input="weight=$_numberUtil.checkPosNumber(weight)">
      <p class="i-unit" slot="right">公斤</p>
    </input-item>


    <submit-button class="i-submit" @submit="submit" tip="开始计算"></submit-button>

    <div class="i-result" v-show="showResult">
      <div style="margin: 1rem 0px">理想体重:<span class="i-result-num">{{honeyWeight.toFixed(0)}}公斤</span></div>
      <div style="margin: 1rem 0px">您的BMI:<span class="i-result-num">{{index.toFixed(1)}}</span></div>
      <div style="margin: 1rem 0px">温馨提示:<span >{{tip}}</span></div>
    </div>

    <bmi-list ref="bmiList" v-show="showResult"></bmi-list>

  </div>
</template>

<script>
  import InputItem from "@/components/common/InputItem";
  import NavBar from "@/components/common/NavBar";
  import SubmitButton from "@/components/common/SubmitButton";
  import BmiList from "@/components/bmi/BmiList";
  import {calendar} from '@common/calendar'

  export default {
    name: "BMI",
    data() {
      return {
        test: 0,
        weight: 0,
        height: 0,
        index: 0,
        type:'0',
        honeyWeight:0,
        tip:'',
        showResult: false
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      submit() {
        let weight = parseFloat(this.weight)
        let height = parseFloat(this.height)
        let tip = ''
        console.log(this.height,this.type);
        if (isNaN(weight) || weight < 30 || weight > 300) {
          tip = '体重输入有问题，请检查'
        }
        if (isNaN(height) || height < 80 || height > 250) {
          tip = '身高输入有问题，请检查'
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return
        }
        this.showResult = true
        let tmp = (this.height/100)*(this.height/100)
        this.index = this.weight/tmp
        this.honeyWeight = tmp *20.5
        if(this.type==='0'){
          this.honeyWeight +=3
        }
        this.tip=this.$refs.bmiList.getTip(this.index)
      }
    },
    components: {
      NavBar,
      InputItem,
      SubmitButton,
      BmiList

    },
    created() {
    },
  }
</script>

<style scoped>
  .i-box {
  }

  .tit-input {
    text-align: right;
    border: none;
    width: 100%;
  }

  .i-result {
    text-align: left;
    padding: 1rem 2rem;
  }

  .i-result-item {
    font-weight: bold;
    line-height: 3rem;
  }

  .i-result-num {
    font-size: var(--font-sub-title);
    margin-left: 1rem;
    color: red;
  }

  .radios {
    margin-top: 1rem;
    text-align: left;
    padding-left: 2rem;
  }

</style>
